<template>
  <div class="buyView">
    <nav-header></nav-header>
    <el-row>
      <div class="w">
        <el-rate v-model="value"
                 disabled
                 show-score
                 text-color="#ff9900"
                 score-template="{value}"
                 style="display: inline-block; margin-right: 20px"></el-rate><i class="el-icon-s-comment"></i><span @click="callService">联系客服</span>
      </div>
    </el-row>
    <div v-if="!intoCard"
         class="main">
      <div class="w clearfix">
        <div class="photo">
          <el-image fit="fill"
                    style="width: 350px; height: 350px"
                    :src="imgUrl"></el-image>
        </div>
        <div class="photo_info">
          <header>{{ drugs.medName }}</header>
          <section class="summary">
            <div>
              <span>国家药品编码：</span><span>{{ drugs.YPID }}}</span>
            </div>
            <div>
              <span>生产企业：</span><span>{{ drugs.medManufacture }}}}</span>
            </div>
            <div>
              <el-radio disabled
                        v-model="radio"
                        :label="1">处方药</el-radio>
              <el-radio disabled
                        v-model="radio"
                        :label="0">非处方药</el-radio>
            </div>
            <div>
              <span>主治功能：</span>
              <strong style="color: #f30213">{{ drugs.medMain }}</strong>
            </div>
            <div>
              <span>成分：</span>
              <el-tag>{{ drugs.medContain }}</el-tag>
            </div>
            <div>
              <span>适用人群：</span><strong>{{ drugs.medSuitable }}</strong>
            </div>
            <div>
              <span>注意事项：</span><strong style="color: #f30213">{{ drugs.medWarning }}</strong>
            </div>
            <div>
              <span>用法用量：</span><strong>{{ drugs.medUsage }}</strong>
            </div>
            <div>
              <span>不良反应：</span><strong>{{ drugs.medAdr }}</strong>
            </div>
            <div class="pirce">
              <span>价格：</span><span style="color: #e4393c; fontsize: 22px">￥ {{ drugs.medPrice }}</span>
            </div>
            <div class="address">
              <span>配送至：</span>
              <el-cascader size="medium"
                           :options="options"
                           v-model="selectedOptions"
                           @change="handleChange">
              </el-cascader>
              <span v-html="'&nbsp;&nbsp;&nbsp;有货'"></span>
            </div>
            <div class="choose-btn">
              <span v-html="'购买数量:&nbsp;&nbsp;&nbsp;'"></span>
              <el-input-number v-model="nums"
                               size="small"
                               @change="handleChange"
                               :min="1"></el-input-number>
            </div>
            <div class="choose-amount">
              <a href="javascript:;"
                 @click="addCart">加入购物车</a>
            </div>
          </section>
        </div>
      </div>
    </div>

    <div v-if="intoCard"
         class="success-wrap">
      <div class="w">
        <div class="success-left">
          <span><svg class="icon-open_icon_successx">
              <use xlink:href="#icon-open_icon_successx"></use>
            </svg></span>
          <span style="color: #71b247; font-size: 18px">药品已成功加入购物车</span>
        </div>
        <div class="success-right">
          <a href="javascript:;"
             @click="goBack()">查看药品详情</a>
          <a href="javascript:;"
             @click="goToCard">去购物车结算</a>
        </div>
      </div>
      <div class="p-item">
        <div class="p-img">
          <el-image fit="fill"
                    style="height: 60px"
                    :src="imgUrl"></el-image>
        </div>

        <div class="p-info">
          <a href="javascript:;"
             @click="goBack()">{{ drugs.medName }}</a>
          <p>数量：{{ nums }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navHeader from 'components/navHeader.vue'
import { request } from 'network/request'
import { regionData, CodeToText } from 'element-china-area-data'
import { formatDate } from 'utils/formatTime'

const baseDrugs = {
  medInfoId: '',
  YPID: '',
  medName: '',
  medManufacture: '',
  medPrice: '',
  medMain: '',
  medContain: '',
  medSuitable: '',
  medWarning: '',
  medUsage: '',
  medAdr: '',
}

export default {
  components: { navHeader },
  data() {
    return {
      value: 5.0,
      drugs: { ...baseDrugs },
      options: regionData,
      selectedOptions: ['440000', '440100', '440113'],
      nums: 1,
      radio: 1,
      intoCard: false,
      imgUrl: '',
    }
  },
  created() {
    const { medInfoId } = this.$route.query
    this.getMedicineInfo(medInfoId)
    this.getSendToRegion()
  },

  computed: {
    sendToRegion() {
      return this.selectedOptions.reduce((pre, curr) => {
        return pre + CodeToText[curr]
      }, '')
    },
  },

  methods: {
    callService() {
      this.$message({ type: 'error', message: '目前还没有客服功能' })
    },
    handleChange(value) {
      this.getSendToRegion()
    },

    getSendToRegion() {
      this.drugs.sendToRegion = this.selectedOptions.reduce((pre, curr) => {
        return pre + CodeToText[curr]
      }, '')
    },

    async addCart() {
      this.$store.commit('add')
      if (!this.$store.state.isLogin) {
        return this.$message({
          type: 'error',
          message: '请先登陆',
        })
      }
      this.intoCard = true
      const ordDate = formatDate()
      const ordNo = new Date().getTime() + ''
      const ordExpressno = ordNo + '123'
      const { medInfoId, medName, medPrice, sendToRegion } = this.drugs
      const ordCount = this.nums
      await request({
        method: 'post',
        url: '/order',
        data: {
          ordDate,
          ordNo,
          ordExpressno,
          medInfoId,
          userPlace: this.sendToRegion,
          ordCount,
          medName,
          medPrice,
        },
      })
    },
    goBack() {
      this.intoCard = false
    },
    async goToCard() {
      this.$router.push('/shoppingCart')
    },
    async getMedicineInfo(medInfoId) {
      const res = await request({
        url: `/medicine/${medInfoId}`,
      })
      Object.assign(this.drugs, res.data)
      this.imgUrl = require(`assets/image/medical_pics/${this.drugs.medName}.jpg`)
    },
  },
}
</script>

<style lang="less" scoped>
.el-row {
  background: #f2f2f2;
  color: #666;
  margin-bottom: 20px;
  span {
    cursor: pointer;
  }
}
.w {
  width: 1200px;
  margin: 10px auto;
}
.main {
  .photo {
    float: left;
    background: #f2f2f2;
  }
  .photo_info {
    margin-left: 400px;
    header {
      font: bold 18px Arial, Helvetica, sans-serif;
      color: #666;
      height: 28px;
      line-height: 28px;
    }
    section {
      font-size: 14px;
      color: #666;
      margin-top: 20px;
      & > div {
        margin-bottom: 20px;
      }
    }
    .choose-amount {
      width: 140px;
      background-color: #fff;
      background-color: #df3033;
      font: 800 18px 'microsoft yahei';
      text-align: center;
      a {
        color: #fff;
        height: 46px;
        line-height: 46px;
      }
    }
  }
}
.success-wrap {
  background: #f2f2f2;
  height: 200px;
  .w {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    .success-left {
      span > svg {
        width: 25px;
        height: 25px;
        margin-right: 10px;
      }
    }
    .success-right {
      text-align: center;
      a:nth-child(1) {
        display: inline-block;
        width: 168px;
        height: 36px;
        line-height: 36px;
        background: #fff;
        color: #e2231a;
        font-weight: 700;
        margin-right: 10px;
      }
      a:nth-of-type(2) {
        display: inline-block;
        width: 168px;
        height: 36px;
        line-height: 36px;
        background: #e2231a;
        color: #fff;
        font-weight: 700;
      }
    }
  }
  .p-item {
    width: 1200px;
    margin: 10px auto;
    .p-img {
      width: 60px;
      float: left;
    }
    .p-info {
      float: left;
      margin: 10px 15px 0;
      a {
        color: #333;
        font-size: 14px;
        &:hover {
          color: #e2231a;
          font-weight: 800;
        }
      }
      p {
        color: #aaa;
        font-size: 12px;
      }
    }
  }
}
</style>
